<template>
  <div class="panel panel-default">
    <div class="panel-heading">
      <TitleTip :title=titleDetail position="bottom">
        <h3 class="panel-title">第 <span>{{ this.$store.state.user.other.year }}</span>
          年 <span>{{ this.$store.state.user.other.month }}</span>
          月
        </h3>
      </TitleTip>
    </div>

    <div class="panel-body">
      <!--主要属性-->
      <div class="row row-top">
        <div class="col-md-6 col-6">寿元：<span>{{ this.$store.state.user.userInfo.age }}</span>/<span>{{ this.$store.state.user.userInfo.life }}</span></div>
        <!--善恶-->
<!--        <div class="col-md-2" style="text-align: center">-->
<!--&lt;!&ndash;          <p><span>邪魔外道</span></p>&ndash;&gt;-->
<!--        </div>-->
        <div class="col-md-6 col-6 overflow-y-hidden" style="text-align: right">血量：<span>{{ this.$store.state.user.userInfo.hp }}</span>/<span>{{
            this.$store.state.user.userInfo.hpTotal + this.$store.state.user.userInfo.buff.hp
          }}</span></div>
      </div>

      <div class="row-middle">
        <div class="tab-content" style="">
          <!--修炼面板-->
          <div class="tab-pane fade show" :class="(this.$store.state.user.userInfo.state!=2&&this.$store.state.user.userInfo.state!=3)?'active':''"  id="exp-tab-pane" role="tabpanel" aria-labelledby="exp-tab" tabindex="0">
            <!--境界名称-->
            <h1 style="color:#000;text-align: center;">
              <TitleTip :title=levelTitleDetail position="bottom">
              {{ levelTemplate[this.$store.state.user.userInfo.level].name }}期
              </TitleTip>
            </h1>
            <TitleTip :title="'当前修炼速度：'+(Math.ceil(this.$store.state.user.userInfo.expSpeed*(100+this.$store.state.user.userFlair.expSpeed)/100)+this.$store.state.user.userInfo.buff.expSpeed)" position="bottom">
              <p style="color:#000;text-align: center;">当前修为：<span>{{ this.$store.state.user.userInfo.exp }}</span>
            /<span>{{ this.$store.state.user.userInfo.levelUpExp }}</span></p>
            </TitleTip>
            <div style="margin-bottom: 10px" class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0"
                 aria-valuemax="100">
              <div class="progress-bar" :class="(this.$store.state.user.userInfo.exp/this.$store.state.user.userInfo.levelUpExp)===1?'bg-warning':'bg-success'"
                   :style="{width:(this.$store.state.user.userInfo.exp/this.$store.state.user.userInfo.levelUpExp)*100 + '%'}"></div>
            </div>
            <p style="color:#000;text-align: center;">突破概率：<span>{{
                Math.ceil(this.$store.state.user.userInfo.levelUpOdds*(100+this.$store.state.user.userFlair.levelUpOdds)/100) + this.$store.state.user.userInfo.buff.levelUpOdds
              }}</span>%</p>
            <p style="color:#000;text-align: center;">修炼速度：{{(Math.ceil(this.$store.state.user.userInfo.expSpeed*(100+this.$store.state.user.userFlair.expSpeed)/100)+this.$store.state.user.userInfo.buff.expSpeed)}}</p>
          </div>

          <!--练功面板-->
          <div class="tab-pane fade show" :class="this.$store.state.user.userInfo.state===3?'active':''" id="study-tab-pane" role="tabpanel" aria-labelledby="study-tab" tabindex="0">
            <!--练功-->
            <h1 style="color:#000;text-align: center;">
              <TitleTip title="熟练度：入门、小成、大成、圆满、化境" position="bottom">
                {{ (this.$store.state.user.userSubject.length>0&&this.$store.state.user.userSubject[0].state===1)?this.$store.state.user.userSubject[0].name:'未修习功法'}}
              </TitleTip>
            </h1>
            <TitleTip :title="'当前修炼速度：'+(Math.ceil(this.$store.state.user.userInfo.expSpeed*(100+this.$store.state.user.userFlair.expSpeed)/100)+this.$store.state.user.userInfo.buff.expSpeed)" position="bottom">
              <p style="color:#000;text-align: center;">当前熟练度：
                <span>
                  {{(this.$store.state.user.userSubject.length>0&&this.$store.state.user.userSubject[0].state===1)?this.$store.state.user.userSubject[0].studyExp:0}}
                </span>
                /<span>
                  {{(this.$store.state.user.userSubject.length>0&&this.$store.state.user.userSubject[0].state===1)?masteryLevel[this.$store.state.user.userSubject[0].masteryLevel].limit:0}}
                </span>
              </p>
            </TitleTip>
            <div style="margin-bottom: 10px" class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0"
                 aria-valuemax="100">
              <div class="progress-bar" :class="((this.$store.state.user.userSubject.length>0&&this.$store.state.user.userSubject[0].state===1)?this.$store.state.user.userSubject[0].studyExp/masteryLevel[this.$store.state.user.userSubject[0].masteryLevel].limit:0)===1?'bg-warning':'bg-success'"
                   :style="{width:((this.$store.state.user.userSubject.length>0&&this.$store.state.user.userSubject[0].state===1)?this.$store.state.user.userSubject[0].studyExp/masteryLevel[this.$store.state.user.userSubject[0].masteryLevel].limit:0)*100 + '%'}"></div>
            </div>
            <TitleTip title="熟练度：入门、小成、大成、圆满、化境" position="bottom">
              <p style="color:#000;text-align: center;">
                熟练等级:<span class="text-success">{{(this.$store.state.user.userSubject.length>0&&this.$store.state.user.userSubject[0].state===1)?masteryLevel[this.$store.state.user.userSubject[0].masteryLevel].name:'未修炼'}}</span>
              </p>
            </TitleTip>
            <p style="color:#000;text-align: center;">
              功法加成:<span class="text-success">{{(this.$store.state.user.userSubject.length>0&&this.$store.state.user.userSubject[0].state===1)?(this.$store.state.user.userSubject[0].expSpeedBuff+(this.$store.state.user.userSubject[0].expSpeedBuff*this.$store.state.user.userSubject[0].masteryLevel)):0}}</span>
            </p>
          </div>

          <!--历练面板-->
          <div class="tab-pane fade show" :class="this.$store.state.user.userInfo.state===2?'active':''"  id="travel-tab-pane" role="tabpanel" aria-labelledby="travel-tab" tabindex="0">
            <h4 class="text-center">
              {{ levelTemplate[this.$store.state.user.userInfo.level].name }}期
              <span class="fs-6 text-secondary">突破：{{
                  Math.ceil(this.$store.state.user.userInfo.levelUpOdds*(100+this.$store.state.user.userFlair.levelUpOdds)/100) + this.$store.state.user.userInfo.buff.levelUpOdds
                }}%</span>
            </h4>
            <form ref="ruleForm" >
            <div class="row">
              <div class="col-md-2">
              好友：
              </div>
              <div class="col-md-10">
                <div v-for="(item,key) in levelTemplate" :key="item"  class="form-check form-check-inline">
                  <input class="form-check-input" @click="change('mate',key)" type="checkbox" :id="'mate'+key" :value="key" name="mate" :checked="this.$store.state.user.config.travel.mate.includes(key)">
                  <label class="form-check-label" :for="'mate'+key">{{item.name}}</label>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-2">
              功法：
              </div>
              <div class="col-md-10">
                <div v-for="(item,key) in subject" :key="item"  class="form-check form-check-inline">
                  <input class="form-check-input" @click="change('subject',key)" type="checkbox" :id="'subject'+key" :value="key" name="subject" :checked="this.$store.state.user.config.travel.subject.includes(key)">
                  <label class="form-check-label" :for="'subject'+key">{{item}}品</label>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-2">
              法宝：
              </div>
              <div class="col-md-10">
                <div v-for="(item,key) in arms" :key="item"  class="form-check form-check-inline">
                  <input class="form-check-input" @click="change('arms',key)" type="checkbox" :id="'arms'+key" :value="key" name="arms" :checked="this.$store.state.user.config.travel.arms.includes(key)">
                  <label class="form-check-label" :for="'arms'+key">{{item}}品</label>
                </div>
              </div>
            </div>

              <div class="row">
                <div class="col-md-2">
                  属性：
                </div>
                <div class="col-md-10">
                  <div v-for="(item,key) in attr" :key="item"  class="form-check form-check-inline">
                    <input class="form-check-input" @click="change('attr',key)" type="checkbox" :id="'attr'+key" :value="key" name="attr" :checked="this.$store.state.user.config.travel.attr.includes(key)">
                    <label class="form-check-label" :for="'attr'+key">{{item.name}}</label>
                  </div>
                </div>
              </div>
            </form>
        </div>
        </div>
      </div>

      <div class="row row-bottom">
        <!--人物属性-->
        <div class="col-md-3" style="height: 68px">
          <div><p>灵根：{{this.$store.state.user.userFlair.name}}</p></div>
          <button type="button" class="btn btn-light btn-xs" data-bs-toggle="offcanvas" data-bs-target="#userAttr" aria-controls="userAttr">
            属性
          </button>

          <button @click="levelUp()" class="btn btn-default btn-xs" :data-bs-target="'#'+alertId"
                  :class="(this.$store.state.user.userInfo.exp===this.$store.state.user.userInfo.levelUpExp)?'btn-success':''">
            <TitleTip :title=levelUpBtnDetail position="bottom">
            突破
            </TitleTip>
          </button>
        </div>
        <!--更改用户状态-->
        <div class="col-md-6"  id="myTab" role="tablist">
          <button class="btn btn-default btn-lg"
                  id="exp-tab"
                  data-bs-toggle="tab"
                  data-bs-target="#exp-tab-pane"
                  type="button"
                  role="tab"
                  aria-controls="exp-tab-pane"
                  aria-selected="true"
                  :class="this.$store.state.user.userInfo.state===1?'btn-success':''"
                  @click="getExp()"
          >
            {{( this.$store.state.user.userMate.length>0&&this.$store.state.user.userMate[0].state === 1) ? '双修' : '修炼'}}
          </button>

          <button class="btn btn-default btn-lg"
                  id="study-tab"
                  data-bs-toggle="tab"
                  data-bs-target="#study-tab-pane"
                  type="button"
                  role="tab"
                  aria-controls="study-tab-pane"
                  aria-selected="false"
                  :class="this.$store.state.user.userInfo.state===3?'btn-success':''"
                  @click="study()"
          >
            练功
          </button>

          <button
              class="btn btn-default btn-lg"
              id="travel-tab"
              data-bs-toggle="tab"
              data-bs-target="#travel-tab-pane"
              type="button"
              role="tab"
              aria-controls="travel-tab-pane"
              aria-selected="false"
              :class="this.$store.state.user.userInfo.state===2?'btn-success':''"
              @click="travel()"
          >
            历练
          </button>
        </div>

        <div class="col-md-3" style="height: 68px">
          <div><p>灵魂强度：{{ this.$store.state.user.userInfo.soul + this.$store.state.user.userInfo.buff.soul }}</p></div>
          <button @click="seize()" class="btn btn-default btn-xs">
            <TitleTip :title=parasiticBtnDetail position="bottom">
              夺舍
            </TitleTip>
          </button>
          <button @click="restart()" class="btn btn-default btn-xs">
            <TitleTip :title=restartBtnDetail position="bottom">
              重生
            </TitleTip>
          </button>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import Level from "../store/modules/level"
import Lang from "../store/language/game"
import User from "../store/modules/user"
import TitleTip from './TitleTip.vue'
import Flair from "../store/modules/flair"
import Arms from "../store/modules/arms"
import Subject from "../store/modules/subject"
import Log from "../store/modules/log"
import Base from "../store/modules/base"


export default {
  name: 'UserInfo',
  data: function () {
    let titleDetail = Lang.userInfoPanel.titleDetail;
    let levelUpBtnDetail = Lang.userInfoPanel.levelUpBtnDetail;
    let restartBtnDetail = Lang.userInfoPanel.restartBtnDetail;
    let parasiticBtnDetail = Lang.userInfoPanel.parasiticBtnDetail;
    let levelTitleDetail = Lang.userInfoPanel.levelTitleDetail;
    return {
      titleDetail: titleDetail,
      levelTitleDetail:levelTitleDetail,
      levelUpBtnDetail: levelUpBtnDetail,
      restartBtnDetail: restartBtnDetail,
      parasiticBtnDetail: parasiticBtnDetail,
      expState: 0,
      studyState: 0,
      travelState: 0,
      expProgress: 0,
      userLevelName: 0,
      alertMessage: "",
      levelTemplate:[],
      arms:[],
      subject:[],
      masteryLevel:[],
      attr:[],
      ruleForm:{},
      name:''

    }
  },
  props: {
    mainTimeHandle: Number,
    isLevelUp: Boolean,
  },
  components: {
    TitleTip,
  },
  created(){
    this.levelTemplate = Level.template;
    this.arms = Arms.levelName;
    this.subject = Subject.levelName;
    this.masteryLevel=Subject.masteryLevel;
    this.attr=Base.attr
  },
  methods: {
    // 历练保留配置
    change(type,key){
      if(type==='mate'){
        if (this.$store.state.user.config.travel.mate.indexOf(key) < 0) {
          this.$store.state.user.config.travel.mate.unshift(key)
        }else {
          this.$store.state.user.config.travel.mate.splice(this.$store.state.user.config.travel.mate.indexOf(key),1);
        }
      }

      if(type==='arms'){
        if (this.$store.state.user.config.travel.arms.indexOf(key) < 0) {
          this.$store.state.user.config.travel.arms.unshift(key)
        }else {
          this.$store.state.user.config.travel.arms.splice(this.$store.state.user.config.travel.arms.indexOf(key),1);
        }
      }

      if(type==='subject'){
        if (this.$store.state.user.config.travel.subject.indexOf(key) < 0) {
          this.$store.state.user.config.travel.subject.unshift(key)
        }else {
          this.$store.state.user.config.travel.subject.splice(this.$store.state.user.config.travel.subject.indexOf(key),1);
        }
      }

      if(type==='attr'){
        if (this.$store.state.user.config.travel.attr.indexOf(key) < 0) {
          this.$store.state.user.config.travel.attr.unshift(key)
        }else {
          this.$store.state.user.config.travel.attr.splice(this.$store.state.user.config.travel.attr.indexOf(key),1);
        }
      }

      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
    },

    // 修炼
    getExp() {
      this.$store.state.user.userInfo.state = 1;
      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
      return true
    },

    // 练功
    study() {
      this.$store.state.user.userInfo.state = 3;
      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
      return true
    },

    // 历练
    travel() {
      this.$store.state.user.userInfo.state = 2;
      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
      return true
    },

    // 突破
    levelUp() {
      // 不具备突破条件
      if (this.$store.state.user.userInfo.exp < this.$store.state.user.userInfo.levelUpExp) {
        this.$message.openMessage('<span class="text-danger">修为不足</span>，无法突破！')
        return false;
      }

      let levelUpOdds = Math.ceil(this.$store.state.user.userInfo.levelUpOdds*(100+this.$store.state.user.userFlair.levelUpOdds)/100) + this.$store.state.user.userInfo.buff.levelUpOdds
      let rand = Math.floor(Math.random() * 100)

      // 重置修为
      this.$store.state.user.userInfo.exp = 0;
      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
      // 突破成功
      if (rand < levelUpOdds) {
        // 提升等级
        this.$store.state.user.userInfo.level++;
        let newLevelInfo = Level.template[this.$store.state.user.userInfo.level];
        // 经验速度
        this.$store.state.user.userInfo.expSpeed += newLevelInfo.expSpeed;
        // 突破概率
        this.$store.state.user.userInfo.levelUpOdds = newLevelInfo.levelUpOdds;
        // 突破经验
        this.$store.state.user.userInfo.levelUpExp = newLevelInfo.levelUpExp;
        // 灵魂强度
        this.$store.state.user.userInfo.soul += newLevelInfo.soul;
        // 寿元
        this.$store.state.user.userInfo.life += newLevelInfo.life;
        // 血量
        this.$store.state.user.userInfo.hp += newLevelInfo.hp;
        // 总血量
        this.$store.state.user.userInfo.hpTotal += newLevelInfo.hp;
        // 回血速度
        this.$store.state.user.userInfo.hot += newLevelInfo.hot;

      }else{
        this.$message.openMessage('很遗憾！<span class="text-danger">突破失败</span>。')
      }

      // 损失血量
      this.__calamityHP()
      // 损失法宝
      this.__calamityArms()

      // 自动进入修炼状态
      if( this.$store.state.user.userInfo.state === 0){
        this.getExp()
      }
    },

    // 夺舍
    seize(){
      let initUser = JSON.parse(JSON.stringify(User.state));
      let oldUser = JSON.parse(JSON.stringify(this.$store.state.user));

      this.$store.state.user = initUser;
      // 保留已学功法
      this.$store.state.user.userSubject = oldUser.userSubject;
      // 保留灵魂强度
      this.$store.state.user.userInfo.soul = oldUser.userInfo.soul;
      // 保留时间
      this.$store.state.user.other = oldUser.other;

      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
    },

    // 重生
    restart() {
      // 清除角色状态计时器
      this.$store.state.user = JSON.parse(JSON.stringify(User.state));
      let flair = Flair.generateFlair()
      this.$store.state.user.userFlair = flair
      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);

      console.log(this.$store.state.user)
    },

    // 劫难-血量
    __calamityHP(){
      let totalHP = this.$store.state.user.userInfo.hpTotal;
      let lossHP = Math.floor(Math.random()*totalHP*0.9);
      this.$store.state.user.userInfo.hp -= lossHP;
      let logs= null;
      logs = Log.generateCalamityHP(Base.getDate(this.$store.state.user),lossHP);

      if (logs !== null) {
        this.$store.state.user.userLog.unshift(logs);
      }

      if(this.$store.state.user.userInfo.hp<=0){
        this.$store.state.user.userInfo.hp=0
        this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
        // this.$message.openMessage('游戏结束');
      }

      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
    },

    //劫难-法宝
    __calamityArms(){
      let randCount = Math.floor(Math.random()*this.$store.state.user.userArms.length)
      for(let i=0;i<randCount;i++){
        let rand = Math.floor(Math.random()*this.$store.state.user.userArms.length)
        let arms = this.$store.state.user.userArms[rand];
        // 扣除人物buff
        this.$store.state.user.userInfo.buff.levelUpOdds -= arms.levelUpOddsBuff
        this.$store.state.user.userInfo.buff.travelSpeed -= arms.travelSpeedBuff
        this.$store.state.user.userInfo.buff.hp -= arms.hpBuff
        this.$store.state.user.userInfo.buff.hot -= arms.hotBuff
        this.$store.state.user.userArms.splice(rand,1)

        // 日志
        let logs= null;
        logs = Log.generateCalamityArms(Base.getDate(this.$store.state.user),arms.name);
        if (logs !== null) {
          this.$store.state.user.userLog.unshift(logs);
        }

        this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
      }
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 上列 */
.row-top {
  height: 30px;
  padding: 10px 10px;
}
.row-top div{
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 中列 */
.row-middle {
  padding: 10px 50px 20px;
  height: 225px;
  overflow-y:auto;
}

/* 下列 */
.row-bottom {
  text-align: center;
}

.tab-content{
  border: 0;
}
.form-check-input:checked {
  background-color: #28a745;
  border-color: #28a745;
}

.form-check-input:focus, .form-check-input:active {
  border-color: #28a745;
  box-shadow: 0 0 0 5px rgba(40, 167, 69, 0.2);
}
</style>
